<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form-model :model="form" :rules="rules" ref="ruleForm" >
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="12">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="标题"
              style="margin-right: -35px"
              prop="esTitle"
            >
              <a-input
                :disabled="disabled"
                placeholder="请输入标题"
                v-model="form.esTitle"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              prop="esTemplateType"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="模板类型">
              <j-dict-select-tag
                :disabled="disabled"
                @change="handleChangeTemplateType"
                :triggerChange="true"
                dictCode="msgType"
                v-model="form.esTemplateType"
                placeholder="请选择模板类型">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="12">

<!--            <a-form-model-item-->
<!--              prop="esType"-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="推送平台">-->
<!--              <j-multi-select-tag-->
<!--                :disabled="disabled"-->
<!--                dictCode="propelling_way"-->
<!--                v-model="form.esType"-->
<!--                placeholder="请选择推送方式">-->
<!--              </j-multi-select-tag>-->
<!--            </a-form-model-item>-->

            <a-form-model-item
              prop="region"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="推送平台"
              style="margin-right: -35px"
            >
              <j-dict-select-tag
                :disabled="disabled"
                :triggerChange="true"
                dictCode="terrace"
                v-model="form.region"
                placeholder="请选择推送平台"
                @change="pingtaiFun">
              </j-dict-select-tag>

            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              prop="esReceiver"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="推送对象">
              <a-select v-model="form.esReceiver" placeholder="请选择" style="width:100%;">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option v-for="(item, key) in resultRList" :key="key" :value="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }"  >
          <a-col :span="12">
            <a-form-model-item
              prop="esSendTimeStatus"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="推送时间"
              style="margin-right: -35px"
            >
              <a-radio-group
                :disabled="disabled"
                v-model="form.esSendTimeStatus"
                @change="dateTypeFun(form.esSendTimeStatus)"
              >
                <a-radio :value="'0'">
                  定时推送
                </a-radio>
                <a-radio :value="'1'">
                  立即推送
                </a-radio>
              </a-radio-group>

            </a-form-model-item>
          </a-col>

          <a-col :span="12"  v-if="dateType">
            <a-form-model-item
              prop="esSendTime"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="推送时间"
              style="margin-right: -35px"
            >
              <j-date v-model="form.esSendTime" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss"/>


            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item
              prop="esType"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="推送方式">
              <j-multi-select-tag
                :disabled="disabled"
                dictCode="propelling_way"
                v-model="form.esType"
                placeholder="请选择推送方式">
              </j-multi-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="选择模板"
              style="margin-right: -35px"
            >
              <j-search-select-tag
                :disabled="disabled"
                @change="handleChangeTemplateType"
                :triggerChange="true"
                :dictOptions="dataSource"
                placeholder="请选择模板">
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="4">
            <a-form-model-item
              v-show="!useEditor"
              prop="esContent"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="模板内容"
              style="margin-left: 4px;width: 126%">
              <a-textarea :disabled="disabled" placeholder="请输入模板内容" v-model="form.esContent" :autosize="{ minRows: 8, maxRows: 8 }"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="4">
            <a-form-model-item
              v-show="useEditor"
              prop="esContent"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="模板内容"
              style="margin-left: 4px;width: 126%">
              <j-editor :disabled="disabled" v-model="form.esContent"></j-editor>
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import {getAction, httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import {duplicateCheck} from '@/api/api'
import JEditor from '@/components/jeecg/JEditor'
import JSwitch from '@/components/jeecg/JSwitch'
import * as returnVisitApi from "@api/sjsk/help/returnVisit";
import {getUserAll, sysMessageAdd, sysMessageEdit} from "@api/sjsk/information";
import {JeecgListMixin} from "@/mixins/JeecgListMixin";

export default {
  name: "SysMessageTemplateModal",
  mixins: [JeecgListMixin],
  components:{
    JEditor,
    JSwitch
  },
  data() {
    return {
      title: "新增",
      visible: false,
      disabled: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      form: {},
      rules: {
        esTitle: [{required: true, message: '请输入标题!' }],
        esTemplateType: [{required: true, message: '请输入模板标题!'}],
        region: [{required: true, message: '请选择推送平台!'}],
        esReceiver:[{required: true, message: '请选择推送对象!'}],
        templateType: [{required: true, message: '请输入模板类型!'}],
        esSendTimeStatus:[{required: true, message: '请选择推送时间!'}],
        esSendTime:[{required: true, message: '请选择时间!'}],
        esType: [{required: true, message: '请选择推送方式!'}],
        esContent: [{required: true, message: '请输入消息内容!'}],
      },
      url: {
        add: "/sys/message/sysMessageTemplate/add",
        edit: "/sys/message/sysMessageTemplate/edit",
        listColl:"/sys/message/sysMessageTemplate/list"
      },
      useEditor:false,
      templateEditorContent:"",
      dataSource:[],
      esContent:undefined,
      editTexr:false,
      dateType:false,
      disable:false,
      resultRList:[],
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    add() {
      this.disabled = false;
      this.visible = true;
      this.editTexr = false
    },
    edit(record) {
      this.disabled=false;
      this.visible = true;
      this.editTexr = true
      this.form = record
    },
    close() {
      this.visible = false;
      this.disabled = true;
      this.form = {}
    },
    look(val){
      this.disabled = true;
      this.visible = true;
      this.form = val
    },
    dateTypeFun(val){
      console.log(val)
      val === '0' ? this.dateType = true : this.dateType = false
    },
    renyuanFun(val){
      // console.log(val+'jsdhijashfduiashfuiashfhwuiefh')
      getUserAll({esPlatform:val,userList:val}).then(ser => {
        console.log(ser)
        this.resultRList = ser.result[0].userList
      }).catch(err => {
        console.log(err)
      })
    },
    pingtaiFun(val){
      this.renyuanFun(val)
    },
    handleOk() {
      if(!this.disable){
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            console.log(this.form)
            sysMessageAdd(this.form).then(ser => {
              console.log(ser)
              if(ser.success){
                this.$message.success('添加成功');
                this.visible = false
                this.loadData()
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log(6)
          }
        })
      }
      if(this.editTexr){
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            console.log(this.form)
            sysMessageEdit(this.form).then(ser => {
              console.log(ser)
              if(ser.success){
                this.$message.success('修改成功');
                this.loadData()
                this.visible = false
                console.log(66)
              } else {
                this.$message.error('修改失败');
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log(6)
          }
        })
      }
      // this.model.templateType = this.templateType;
      // const that = this;
      // 触发表单验证
      // this.form.validateFields((err, values) => {
      //   console.log(err,values)
      // })
    },
    validateTemplateCode(rule, value, callback){
      var params = {
        tableName: "sys_sms_template",
        fieldName: "template_code",
        fieldVal: value,
        dataId: this.model.id
      }
      duplicateCheck(params).then((res)=>{
        if(res.success){
          callback();
        }else{
          callback(res.message);
        }
      })

    },
    handleCancel() {
      this.close()
    },
    handleChangeTemplateType(value){
      //如果是邮件类型那么则改变模板内容是富文本编辑器
      this.useEditor = (value==2 || value==4)

      for(let item of this.dataSource){
        if(item.templateCode === value){
          this.$set(this.form, 'esTemplateType', item.templateType);
          this.useEditor = item.templateType === '2'
          this.$set(this.form, 'esContent', item.templateContent);
          console.log(this.form.esContent)
        }
      }
    },
    loadData(arg) {
      if(!this.url.listColl){
        this.$message.error("请设置url.listColl属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      // var params = this.getQueryParams();//查询条件
      // this.loading = true;
      getAction(this.url.listColl).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records||res.result;
          for(let item of this.dataSource){
            item.text = item.templateName
            item.value = item.templateCode
          }
          console.log(this.dataSource)

        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // this.loading = false
      })
    },
  }
}
</script>

<style scoped>

</style>
